input[type=checkbox] {
    display: none;
}

input[type="checkbox"] + .eye  {
    display: inline-block;
    vertical-align: middle;
    width: 24px;
    height: 24px;
    background-color: #BDBDBD;
    mask-image: url("./../svg/eye-off.svg");
    -webkit-mask-image: url("./../svg/eye-off.svg");
}

input[type="checkbox"]:checked + .eye {
    background-color: #1E88E5;
    mask-image: url("./../svg/eye.svg");
    -webkit-mask-image: url("./../svg/eye.svg");
}

input[type="checkbox"] + .bell  {
    display: inline-block;
    vertical-align: middle;
    width: 24px;
    height: 24px;
    background-color: #BDBDBD;
    mask-image: url("./../svg/bell-off.svg");
    -webkit-mask-image: url("./../svg/bell-off.svg");
}

input[type="checkbox"]:checked + .bell {
    background-color: #1E88E5;
    mask-image: url("./../svg/bell.svg");
    -webkit-mask-image: url("./../svg/bell.svg");
}

input[type="checkbox"] + .roundCircle  {
    display: inline-block;
    vertical-align: middle;
    width: 24px;
    height: 24px;
    background-color: #BDBDBD;
    mask-image: url("./../svg/checkbox-blank-circle.svg");
    -webkit-mask-image: url("./../svg/checkbox-blank-circle.svg");
}

input[type="checkbox"]:checked + .roundCircle {
    background-color: #1E88E5;
    mask-image: url("./../svg/checkbox-marked-circle.svg");
    -webkit-mask-image: url("./../svg/checkbox-marked-circle.svg");
}

.palette {
    width: 24px;
    height: 24px;
    background-color: #1E88E5;
    mask-image: url("./../svg/palette.svg");
    -webkit-mask-image: url("./../svg/palette.svg");
}